 <template>
    <div class="intergration-wrapper">
        <centerHeader/>

        <div class="centerCate-wrap">
            <div class="info-box" v-for="item in address_list" :key="item.address_id">
                <div class="box-l">
                    <ul>
                        <!-- <li>
                            <p>
                                <span class="title-01">{{user_info.username}}</span>
                                <span class="title-01">({{user_info.mobile}})</span>
                            </p>
                        </li> -->
                        <li>
                            <p>
                                <span class="title-03">{{item.province_name}}{{item.city_name}}{{item.area_name}}{{item.address}}</span>
                            </p>
                        </li>
                    </ul>
                </div>

                <div class="box-r">
                    <router-link
                        tag="i"
                        :to="{ name: 'addressIndex', query: {address_id: item.address_id} }"
                        class="icon iconfont icon-bianji icon-02"
                    ></router-link>
                </div>
            </div>
            
            <div class="submit-box">
                <router-link
                    tag="button"
                    :to="{ name: 'addressAdd', params: {} }"
                    class="submit-btn"
                >
                    <i class="icon iconfont icon-jiahao icon-03"></i> 新建地址
                </router-link>
            </div>
        </div>

        <centerFooter/>
    </div>
</template>
 
<script type="text/ecmascript-6">
import centerHeader from "@/views/center/components/centerHeader";
import centerFooter from "@/views/center/components/centerFooter";
import constant from "@/utils/constant.js";
// 引用API文件
import http from "@/utils/http.js";

export default {
  name: "addressModify",
  data() {
    return {
      isBuy: true,
      user_info: {},
      address_list: {}
    };
  },
  components: {
    centerHeader,
    centerFooter
  },
  methods: {
    submit() {

    },
    userinfo() {
      http.get(this, {
        url: "ucenter/user_info",
        data: {
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("用户信息:", data);
          if (data.status == 1) {
            this.user_info = data.info;
          } else {
          }
        }
      });
    },
    addresslist() {
      http.get(this, {
        url: "address/address_list",
        data: {
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("地址列表信息:", data);
          if (data.status == 1) {
            this.address_list = data.info;
          } else {
          }
        }
      });
    }
  },
  created() {},
  activated() {
    this.userinfo();
    this.addresslist();
  }
};
</script>
 
<style scoped lang="scss">
.intergration-wrapper {
}

.centerCate-wrap {
  width: 100%;
  text-align: center;

  .info-box {
    @extend .cmm-clearfix;
    $letHeight: 1rem;
    min-height: $letHeight;
    padding: 0.22rem 0;

    .box-l {
      float: left;
      width: 6rem;
      position: relative;
      min-height: $letHeight;
      margin-left: 0.2rem;
    }

    .box-r {
      float: right;
      position: relative;
      width: 1rem;
      height: $letHeight;

      .icon-02 {
        float: right;
        font-size: 0.6rem;
        @extend .cmm-translateXY;
      }
    }
  }

  ul {
    width: 100%;
    $letHeight: 0.5rem;

    li {
      line-height: $letHeight;

      p {
        color: $c-mainC;
        @extend .cmm-clearfix;
        height: $letHeight;

        * {
          line-height: $letHeight;
          display: inline-block;
          vertical-align: middle;
        }

        a {
          width: 100%;
        }

        .icon-02 {
          float: right;
          font-size: 0.6rem;
        }

        .title-01 {
          font-size: 0.32rem;
          float: left;
          color: $c-mainC;
          font-weight: 500;
        }

        .title-03 {
          font-size: 0.22rem;
          float: left;
          color: $c-mainC;
        }
      }
    }
  }
}

.icon-03 {
  font-size: 0.7rem;
  line-height: 0.8rem;
  vertical-align: middle;
  font-weight: 100;
  width: 0.5rem;
  display: inline-block;
}

.submit-box {
  padding: 0 0.66rem;
  margin-top: 0;
}
</style>
 